import React, { useEffect, useState } from 'react';
import { Upload, Button } from 'antd';
// import { PlusOutlined } from '@ant-design/icons';
import { RcUploadChangeParam, RcUploadFile } from './interface';
import OSS  from '@/utils/aliyun-oss';

export default ({
  maxLength = 1,
  value,
  onChange,
  accept = '',
  ...props
}: any) => {
  const [fileList, handleFileList] = useState<any[]>([]);

  useEffect(() => {
    if (value) {
      if (value instanceof Array) {
        handleFileList(value);
      } else if (value instanceof Object) {
        handleFileList([value]);
      }
    }
  }, [value]);

  const handleOnChange = ({ fileList, file }: RcUploadChangeParam) => {
    handleOnChangeFileList({ fileList, file });
  };

  const handleOnChangeFileList = ({
    fileList: filesList,
    file,
  }: RcUploadChangeParam) => {
    let newFileList;
    console.log(filesList[0].percent,'ssss')

    if (onChange) {
      if (maxLength == 1 && filesList.length) {
        if (!filesList[0]?.url && filesList[0]?.status == 'done') {
          filesList[0].url = OSS.setUploadFileUrl(filesList[0]).url;
        }
        console.log(filesList)
        if(filesList[0].percent==100){
          filesList[0].percent = filesList[0].name
        }else {
          filesList[0].percent =  filesList[0].percent.toFixed(2)+'%'
        }
        newFileList = {
          url: filesList[0].url,
          name:filesList[0].percent,
          status: 'done',
          uid: filesList[0].uid,
          type: filesList[0].type,
          size: filesList[0].size,
        };
        onChange(newFileList);
        handleFileList([newFileList]);
      } else if (filesList.length) {
        newFileList = filesList.map(item => {
          if (!item?.url && item?.status == 'done') {
            item.url = OSS.setUploadFileUrl(item).url;
          }
          return {
            url: item.url,
            name: item.name,
            status: 'done',
            uid: item.uid,
            type: item.type,
            size: item.size,
          };
        });
        onChange(newFileList);
        handleFileList(newFileList);
      } else {
        onChange(null);
        handleFileList([]);
      }
    }
  };

  const handleOnRemove = (file: RcUploadFile) => {
    const files = fileList.filter(v => v.url !== file.url);
    if (onChange) {
      handleFileList(files);
    }
  };

  const uploadProps: any = {
    name: 'file',
    fileList: fileList,
    action: OSS.option.host,
    onChange: handleOnChange,
    onRemove: handleOnRemove,
    data: OSS.getExtraData,
    accept: accept,
  };

  return (
    <>
      <Upload {...props} {...uploadProps}>
        {fileList.length < maxLength ? (
          <Button
            icon={
              <span
                role="img"
                aria-label="upload"
                className="anticon anticon-upload"
              >
                <svg
                  viewBox="64 64 896 896"
                  focusable="false"
                  data-icon="upload"
                  width="1em"
                  height="1em"
                  fill="currentColor"
                  aria-hidden="true"
                >
                  <path d="M400 317.7h73.9V656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V317.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 163a8 8 0 00-12.6 0l-112 141.7c-4.1 5.3-.4 13 6.3 13zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"></path>
                </svg>
              </span>
            }
          >
            Click to Upload
          </Button>
        ) : null}
      </Upload>
    </>
  );
};
